<template>
  <div class="box">
    <header class="header">
      <van-nav-bar style="height:52px;line-height:52px;background:#f4f4f4">
        <div slot="left" @click="goBack">
          <img src="https://m.xiaomiyoupin.com/youpin/static/m/res/images/icons/icon_arrow_left_darkgray.png" alt="00" style="width:48px;">
        </div>
        <van-search
          v-model="value"
          id="searchVal"
          shape="round"
          background="#f4f4f4"
          slot="title"
          placeholder="请输入搜索关键词"
          disabled
          @click="$router.push('/search')"
        />
        <div class="sousuo">搜索</div>
      </van-nav-bar>
    </header>
    <div class="content" id="content">
      <!-- 筛选 -->
      <van-sticky>
        <van-dropdown-menu active-color="#ee0a24">
          <van-dropdown-item @change="change1" v-model="value1" :options="option1" />
          <van-dropdown-item @change="change2"  v-model="value2" :options="option2" />
        </van-dropdown-menu>
      </van-sticky>
      <Prolist :prolist="prolist"></Prolist>
      <div class="backtop" v-if="flag" @click="backtop">
        <img src="https://img.youpin.mi-img.com/static/weex_images/v1/m/up_top.png" alt="00">
      </div>
    </div>
  </div>
</template>
<script>
import Prolist from '@/components/prolist'
import { searchItem, getCategoryBrandList } from '@/api'
import Vue from 'vue'
import { NavBar, Search, Toast, DropdownMenu, DropdownItem, Sticky } from 'vant'
Vue.use(NavBar)
Vue.use(Search)
Vue.use(Toast)
Vue.use(DropdownMenu)
Vue.use(DropdownItem)
Vue.use(Sticky)
export default {
  data () {
    return {
      value: '',
      prolist: [],
      oldlist: '',
      value1: 0,
      value2: 0,
      flag: false,
      option1: [
        { text: '综合价格', value: 0 },
        { text: '价格最低', value: 1 },
        { text: '价格最高', value: 2 }
      ],
      option2: [
        { text: '销量评分', value: 0 },
        { text: '销量最高', value: 1 },
        { text: '评分最高', value: 2 }
      ]
    }
  },
  components: {
    Prolist
  },
  mounted () {
    console.log(this.$route.query)
    // 分类包括搜索跳转的参数
    const { value, type, brand } = this.$route.query
    this.value = value
    if (this.value) {
      searchItem({ value: this.value }).then(res => {
        console.log(res.data.data)
        this.prolist = res.data.data
        this.oldlist = JSON.stringify(res.data.data)
        console.log(this.prolist.length)
        if (this.prolist.length === 0) {
          this.emptyFlag = true
          console.log('gannima')
          console.log(this.emptyFlag)
        }
      })
    } else {
      getCategoryBrandList({ type, brand }).then(res => {
        console.log(res.data)
        this.prolist = res.data.data
        this.oldlist = JSON.stringify(res.data.data)
        console.log(this.prolist.length)
        if (this.prolist.length === 0) {
          this.emptyFlag = true
          console.log('gannima')
          console.log(this.emptyFlag)
        }
      })
    }
    document.getElementById('content').addEventListener('scroll', this.handleScroll, false)
  },
  methods: {
    goBack () {
      console.log('返回上一级')
      this.$router.go(-1)
    },
    change1 (value) {
      if (value === 0) {
        this.prolist = JSON.parse(this.oldlist)
        return
      }
      if (value === 1) {
        this.prolist.sort((a, b) => {
          return a.price - b.price
        })
        return
      }
      if (value === 2) {
        this.prolist.sort((a, b) => {
          return b.price - a.price
        })
      }
    },
    change2 (value) {
      console.log(value)
      if (value === 0) {
        this.prolist = JSON.parse(this.oldlist)
        return
      }
      if (value === 1) {
        this.prolist.sort((a, b) => {
          return b.sales - a.sales
        })
        return
      }
      if (value === 2) {
        this.prolist.sort((a, b) => {
          return b.rating - a.rating
        })
      }
    },
    backtop () {
      // document.getElementById('content').scrollTop = 0
      // 使用计时器
      const timer = setInterval(() => {
        // console.log(document.getElementById('content').scrollTop)
        document.getElementById('content').scrollTop -= 200
        if (document.getElementById('content').scrollTop <= 100) {
          document.getElementById('content').scrollTop = 0
          clearInterval(timer)
        }
      }, 30)
    },
    handleScroll () {
      console.log('滚动')
      // 获取滚动条滚动的距离
      const scrollTop = document.getElementById('content').scrollTop
      // 判定返回顶部是不是要出现
      if (scrollTop > 500) {
        this.flag = true
      } else {
        this.flag = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.backtop {
  position: fixed;
  bottom:50px;
  right:-55px;
  img {
    width: 50%;
  }
}
.empty {
  margin:20px;
  color:#999;
}
</style>
